3. 常见清除浮动的方法

父元素下的最后一个浮动元素后，添加一个新标签，设置clear:both（不推荐）

  • 优点：通俗易懂，方便

  • 缺点：添加无意义标签，语义化差

    • 父元素添加overflow:hidden（不推荐）

  • 优点：代码简洁

  • 内容增多时，会造成无法显示要溢出的内容

    • 父元素添加after伪元素（推荐）

  • 优点：代码简洁

  • 缺点：ie6-7不支持伪元素，可以是用zoom触发ie的hasLayout属性
  1. .clearfix:after{
  2.     content: "";
  3.     display: block;
  4.     height: 0;
  5.     clear:both;
  6.     visibility: hidden;
  7. }
  8. .clearfix{
  9.     *zoom: 1;
  10. }
  12. <div class="fahter clearfix">
  13.     <div class="big">big</div>
  14.     <div class="small">small</div>
  15. </div>